<template>
    <div id="ipt">
        <div class="title">
            编号：<input type="text" v-model="id">
            品牌名称：<input type="text" v-model="brand"><br>
            产品图片地址：<input type="text" v-model="pic">
            价格：<input type="text" v-model="price">
            <button class="add" @click="add">添加</button>
        </div>
        <div class="search">
            <input type="text" v-model="keyword" placeholder="请输入搜索条件">
            <button>搜索</button>
        </div>
    </div>
</template>
<script>
    export default {
        props:{  //来接收父传来的数据
            oldGoodsList:{
                type: Array,
            }
        },
        data(){
            return {
                pic:"",
                id:"",
                brand:"",
                price:"",
                count:"",
                keyword:""   //搜索关键字
            }
        },
        watch:{
            keyword(newVal){
                //去oldGoodsList里面搜索，得到结果后重新给goodsList赋值
                console.log(newVal);
                console.log(this.oldGoodsList);
                //根据newVal用户搜索的关键字去oldGoodsList中的每个对象中的productName这个字段中进行indexOf搜索，结合filter，返回搜索结果不等于-1的选项
                let result = this.oldGoodsList.filter(item=>item.productName.indexOf(newVal)!==-1)
                console.log(result);
                //将搜索的结果发送给父组件
                this.$emit("search",result)
            }
        },
        methods:{
            add(){
                //声明一个对象，用来接收数组
                let obj = {
                    pic:this.pic,
                    id:Math.random().toString(32).substring(2),
                    brand:this.brand,
                    price:this.price,
                    count:1,
                }
                //传递给父组件
                this.$emit("add",obj)
            }
        }
    }

</script>
<style>
    *{margin:0;padding:0;}
    .title{
        width:600px;
        height:70px;
        border:1px solid;
        padding: 10px 0;
        margin:0 auto;
        box-sizing: border-box;
        /* padding-left:20px; */
    }
    .add{
        width:50px;
        margin-left: 20px;
    }
    .search{
        width:600px;
        height:40px;
        border:1px solid;
        line-height: 40px;
        padding-left: 20px;
        box-sizing: border-box;
        margin:0 auto;
    }
    .search button{
        margin-left: 20px;
        width:50px;
    }
</style>
